<template>
  <div class="vedio">
    <video id="myVideo"
           muted
           autoplay
           class="video-js vjs-default-skin vjs-big-play-centered"
           controls preload="auto" data-setup='{}' loop="loop">
      <source id="source"  type="application/x-mpegURL">
    </video>
  </div>
</template>

<script>
import videojs from 'video.js'
import 'videojs-contrib-hls'

export default {
  name: 'Vedio',
  data () {
    return {
      // 视频播放地址
      src: ''
    }
  },
  created () {
    console.log(this.$route.query.urlshow)
    this.src = this.$route.query.urlshow
    const param = 'http://pull.live.krray.com/liveh/CAM1001-H.m3u8?auth_info=TCtE4URxJs%2Bjoh0tEeMd6p7pv98Qe1vjq26BFfs50s3Xw5u%2FmNxHv2cFCaALrIrG.676234584a663848556d356b3470444d' /* 参数 */
    // const param = window.location.href.split('urlshow')[1].substring(1) /* 参数 */
    // console.log(param)
    console.log(document.getElementById('source'));
    document.getElementById('source').setAttribute('src', param)
    // 获取视频播放对象
    // eslint-disable-next-line no-undef
    const myVideo = videojs('myVideo', {
      bigPlayButton: true,
      textTrackDisplay: false,
      posterImage: false,
      errorDisplay: false // 发生错误时,vedio.js是否显示
      // source: [
      //   {
      //     type: 'application/x-mpegURL',
      //     src: "http://pull.live.krray.com/liveh/CAM1001-H.m3u8?auth_info=UQvvLJgLT6XFs9wj0Os%2FK61JtFq8Rf2lohD8J0eWemuo4BC9IZJURSLyx1G5XCes.316558456a6d6251624e57396e6d4f47"
      //   }
      // ]
    })
    myVideo.play()
    myVideo.pause()
  }
}
</script>

<style scoped lang="less">
  .vedio {
    width: 375px;
    height: 100%;
  }
</style>
